<template>
  <div>
    <div class="carousel">
      <!-- 轮播图开始 -->
      <div class="block">
        <el-carousel height="400px" >
          <el-carousel-item >
            <img src = 'https://s3.bmp.ovh/imgs/2022/02/a9367dafe3679c2a.jpeg' />
          </el-carousel-item>
          <el-carousel-item >
            <img src = 'https://s3.bmp.ovh/imgs/2022/02/4415b4a52ce6a75e.jpeg' />
          </el-carousel-item>
          <el-carousel-item >
            <img src = 'https://s3.bmp.ovh/imgs/2022/02/e59916474aa0f5da.jpeg' />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 轮播图结束 -->
    </div>
    <!-- 自习室开始 -->
    <div class="projects">
      <div class="wrapper">
        <div class="title" >自习室</div>
        <div class="project" v-for="item in scenicList" :key="item.id" @click="goDetail(item.id)">
          <div class="left">
            <img
                    width="100%"
                    :src="item.pic"
                    alt=""
            />
          </div>
          <div class="right">
            <div class="intro" style="font-weight: bold">自习室房间名：{{item.name}}</div>
            <div class="intro" style="height: 25px"></div>
            <div class="intro">自习室房间类型：{{item.type}}</div>
          </div>
        </div>
        </div>
      </div>
    <!-- 自习室结束 -->
  </div>
</template>


<script>
import { getRoom } from "@/utils/request";
export default {
    name: "Person",
  data() {
    return {
        scenicList:[],
        queryParams: {
            name:null,
            pageNum: 1,
            pageSize: 2,
            total:0
        },
    }
  },
  methods: {
      listDataApi(){
          getRoom(this.queryParams).then(res => {
              if(res.code == 200){
                  this.scenicList = res.rows;
                  this.queryParams.total=res.total;
              }else{
                  this.$message({
                      type:'error',
                      message:res.msg
                  })
              }
          })
      },
      goDetail(id){
          // 跳转到详情页面，并且传递id
          this.$router.push({path:'/roomDetail',query:{id:id}})
      }
  },
  created() {
      this.listDataApi();
  },
}
</script>

<style scoped lang='scss'>
.projects {
  .wrapper {
    width: 1240px;
    .title {
      font-size: 20px;
      line-height: 80px;
      border-bottom: 1px solid #f4f4f4;
    }
    .project {
      display: flex;
      padding: 1em 0;
      border-bottom: 1px solid #f4f4f4;
      .left {
        width: 300px;
        height: 200px;
        background-color: #f4f4f4;
        border-radius: 5px;
        overflow: hidden;
      }
      .right {
        flex: 1;
        padding: 0 2em;
        .name {
          font-weight: bolder;
          font-size: 1em;
        }
        .date {
          margin: 1em 0;
        }
      }
    }
  }
}
.article{
  .wrapper{
    width: 1240px;
    .title{
      height: 80px;
      font-size: 20px;
      line-height: 80px;
    }
  }
}
</style>
